<template>
  <div>
    <canvas id="container" width="345" height="190"></canvas>
  </div>
</template>

<script>
import F2 from '@antv/f2'
export default {
  props: ['percentList'],
  methods: {
    renders () {
      //   console.log(this.percentList)
      const data = this.percentList

      const map = {}
      data.forEach(function (obj) {
        map[obj.assetType] = obj.percent + '%'
      })

      const chart = new F2.Chart({
        id: 'container',
        pixelRatio: window.devicePixelRatio,
        padding: [15, 'auto']
      })
      chart.source(data, {
        percent: {
          formatter: function formatter (val) {
            return val + '%'
          }
        }
      })
      chart.tooltip(false)
      chart.legend({
        position: 'right',
        itemFormatter: function itemFormatter (val) {
          return val + '    ' + map[val]
        }
      })
      chart.coord('polar', {
        transposed: true,
        innerRadius: 0.4,
        radius: 0.7
      })
      chart.axis(false)
      chart
        .interval()
        .position('a*percent')
        .color('assetType', [
          '#75a1f7',
          '#77ddb5',
          '#7686a0',
          '#e97f69',
          '#f6c648'
        ])
        .adjust('stack')

      chart.guide().html({
        position: ['50%', '45%'],
        html: `<div style="width: 250px;height: 40px;text-align: center;">
      <div style="font-size: 14px">平均</div>
      <div style="font-size: 14px">$17610</div>
    </div>`
      })
      chart.render()
    }
  },
  watch: {
    percentList (val) {
      val.map(item => {
        item.a = '1'
      })
      this.renders()
    }
  }
  //   created () {
  //     this.$nextTick(() => {
  //       this.percentList.map(item => {
  //         item.a = '1'
  //       })
  //       this.renders()
  //     })
  //   }
}
</script>

<style></style>
